<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_作用域插槽</title>
</head>
<!-- 
    有的时候子组件里的内容在页面上根据不同的地方有不同的展现形式,比如:有的地方需要列表展示、有的需要一行展示、有的需要拼接展示...,
    那么这时就有了作用域插槽。
    
    作用域插槽: 父组件替换插槽的标签,但是内容由子组件来提供.(通俗一点,即父组件如何拿到子组件的数据)
-->

<body>
    <div id="app">
        <cpn></cpn>
        <cpn>
            <div slot-scope="xxx">
                <!-- <span v-for="item in slot.abc">{{item}}</span> -->
                <span>{{xxx.abc.join('----')}}</span>
            </div>
        </cpn>
    </div>
</body>
<script src="../vue.js"></script>

<template id="cpn">
    <div>
        <!-- 这个abc相当于一个变量用来存储languages,即 let abc = languages -->
        <slot :abc="languages">
            <ul>
                <li v-for="item in languages">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script>
    const vm = new Vue({
        el: '#app',
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        languages: ['js', 'php', 'java', 'c++', 'golang', 'python']
                    }
                }
            }
        }
    })
</script>

</html>